<template>
  <el-menu
    class="el-menu-vertical-demo"
    router
  >
    <el-menu-item v-for="item in items" :key="item.key" class="aside-item" :index="`/MainHome/merchandise/${item.id}`">
      <img :src="item.imageURL" :alt="item.route" class="show-merchandise">
    </el-menu-item>
  </el-menu>
</template>

<script>
import { onMounted, reactive } from 'vue'
import axios from 'axios'
import useIPAddress from '../hooks/useIPAddress.js'

export default {
  setup() {

    // 配置axios请求的ip地址
    const ip = useIPAddress()
    
    // 发送请求获取商品图片信息并且展示在Aside区域
    const items = reactive(new Array())
    onMounted(() => {
      axios.get(`http://${ip}/merchandises`)
        .then(res => {
          res.data.forEach(element => {
            const item = {
              id: element._id,
              route: element.route,
              imageURL: element.imageURL
            }
            items.push(item)
          })
        })
        .catch(err => {
          console.log('OWN ERROR: axios error: ', err, '--where: Aside merchandises')
        })
    })

    return {
      items,
    }
  }
}
</script>

<style>
  .show-merchandise {
    width: 12vw;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.5s;
  }
  .show-merchandise:hover {
    width: 14vw;
  }
  .aside-item {
    width: 100%;
    height: 25vh;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
  }
  .aside-item:hover {
    background-color: #EEA8A815;
  }
</style>